<section class="bg-white pt-24 text-black" style="user-select: none;">
    <div style="width: 100%; height: 500px; position: relative;">
        <CascadingValue Value="_diagram">
            <DiagramCanvas>
                <Widgets>
                    <GridWidget Size="20" Mode="GridMode.Point" BackgroundColor="white"/>
                    <SelectionBoxWidget/>
                </Widgets>
            </DiagramCanvas>
        </CascadingValue>

        <div class="absolute flex flex-col w-full md:w-2/5 justify-center items-start text-center md:text-left" style="top: 40px; right: 40px;">
            <h2 class="my-4 text-5xl font-bold leading-tight">
                Blazor Diagrams
            </h2>
            <p class="leading-normal text-2xl mb-8">
                A fully customizable, extensible and all-purpose <br/> open-source diagrams library for Blazor
            </p>
            <a href="/documentation/installation" class="border mx-auto lg:mx-0 bg-white text-gray-800 font-bold rounded-full my-6 py-4 px-8 shadow-lg focus:outline-none focus:shadow-outline transform transition hover:scale-105 duration-300 ease-in-out">
                <svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="inline">
                    <path d="m8.086 18.611 5.996-14.004a1 1 0 0 1 1.878.677l-.04.11-5.996 14.004a1 1 0 0 1-1.878-.677l.04-.11 5.996-14.004L8.086 18.61Zm-5.793-7.318 4-4a1 1 0 0 1 1.497 1.32l-.083.094L4.414 12l3.293 3.293a1 1 0 0 1-1.32 1.498l-.094-.084-4-4a1 1 0 0 1-.083-1.32l.083-.094 4-4-4 4Zm14-4.001a1 1 0 0 1 1.32-.083l.093.083 4.001 4.001a1 1 0 0 1 .083 1.32l-.083.095-4.001 3.995a1 1 0 0 1-1.497-1.32l.084-.095L19.584 12l-3.293-3.294a1 1 0 0 1 0-1.414Z" fill="#000000"/>
                </svg>
                Get started
            </a>
        </div>
    </div>
</section>